<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="yls">
    <title>门店管理</title>
    <link rel="stylesheet" href="/css/site.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/js/jquery-1.11.3.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <style>
        h3 {
            text-align: center;
        }
    </style>
</head>
<body>
<a href='javascript:void(0);' onclick="logOut()" class='close'
   style="height:3em; float: right;margin-right: 5%;padding-top: 8px;">退出</a>
<!--<a href="order" type="button" class="btn btn-primary close_1"-->
<!--style="margin-left:5%;float:left;width:8em;height:3em;padding-top: 8px;">订单管理-->
<!--</a>-->
<!--信息输入界面-->
<h2 style="text-align: center; color: #ff4d4d;">门店管理</h2>

<div class="container" style="margin-top: 95px;background-color:#ff4d4d;border-radius:10px;color: #000;">
    <form action="shopManagement" method="post">
        <h3>门店信息</h3>

        <div>
            <table class="table">
                <thead style="text-align: center;">
                <th>区域</th>
                <th>门店信息</th>
                <th>编辑</th>
                </thead>
                <tbody id="tbShop">
                <% for(var i = 0;i < branchShop.length;i++){ %>
                <tr>
                    <th><%= branchShop[i].areaName %></th>
                    <th><%= branchShop[i].shopName %></th>
                    <th><input type="hidden" value="<%= branchShop[i].areaid %>"/><input type="button" class="close_1" style="height:1.7em;line-height:1em;" onclick="editIt(event)" value="编辑"/>
                    </th>
                </tr>
                <% } %>
                </tbody>
            </table>
        </div>

        <h3>输入信息</h3>

        <div class="input">
            <div>
                <table class="table">
                    <thead>
                    <th>区域</th>
                    <th>门店信息</th>
                    <th>确认</th>
                    </thead>
                    <tr style="color: #000;">
                        <th><select name="" id="slArea">
                                <% for(var i = 0;i < areaList.length;i++){ %>
                                <option value="<%= areaList[i][0] %>"><%= areaList[i][1] %></option>
                                <% } %>
                            </select></th>
                        <th><input type="text" id="txtShopName" placeholder="请输入门店信息" required/></th>
                        <th><input class="close_1" type="submit"
                                                   onclick="return checkInputAndSubmit()"
                                                   style="height:1.7em;line-height:1em;" value="确认"></th>
                    </tr>
                </table>
            </div>
        </div>
        <input id="hidShops" name="shopsInfo" type="hidden" value=""/>
        <a id="goBack" class="btn btn-primary navbar-right close_1" onclick="history.go(-1)"
           style="margin-right: 5%;margin-top: 5%;margin-bottom: 1%;height:40px;" type="submit" value="">返回</a>
    </form>
</div>
<script>
    function editIt(event) {

        event = event ? event : window.event;
        var obj = event.srcElement ? event.srcElement : event.target;
        var shopName = $("th:eq(1)", $(obj).parents("tr")).text();
        var areaId = $("input[type=hidden]", $(obj).parents("tr")).val();
//        $("#slArea option").find(""+areaId+"").attr("selected","selected");
//        alert(areaId);
        $("#slArea option").each(function () {
            if ($(this).get(0).value == areaId) {
                $(this).get(0).selected = true;
            }
        })
        $("#txtShopName").val(shopName);
        $(obj).parents("tr").remove();
    }
    function checkInputAndSubmit() {
        var flag = true;
        var shopNameCurrent = $("#txtShopName").val().replace(/^\s*/g, "").replace(/\s*$/g, "");
        if (shopNameCurrent == "") {
            alert("请输入分店名称");
            $("#txtShopName").focus();
            return false;
        }
        var areaName=$("#slArea").find("option:selected").text();
        $("#tbShop tr").each(function () {
            var aName=$("th:eq(0)", $(this)).text();
            var name = $("th:eq(1)", $(this)).text();
            if (areaName == aName) {
                alert("区域选择重复");
                flag = false;
                return;
            }
            if (shopNameCurrent == name) {
                alert("分店名称重复");
                flag = false;
                return;
            }
        })
        if (flag == false) {
            return false;
        }

        var areaId = $("#slArea").val();
        var areaName = $("#slArea").find("option:selected").text();

        var tr = $("<tr><th class=\"danger\">" + areaName + "</th><th class=\"success\">" + shopNameCurrent + "</th><th class=\"warning\"><input type=\"hidden\" value=\"" + areaId + "\"/><input class=\"close_1\" type=\"button\" style=\"height:1.7em;line-height:1em;\" value=\"编辑\"></th></tr>");
        $("#tbShop").append(tr);

        var shopInfo = "";
        $("#tbShop tr").each(function () {
            var areaName = $("th:eq(0)", $(this)).text();
            var shopName = $("th:eq(1)", $(this)).text();
            var areaId = $("input[type=hidden]", $(this)).val();

            shopInfo += areaId + "," + areaName + "," + shopName + ";";
        })
        if (shopInfo.length > 1) {
            shopInfo = shopInfo.substring(0, shopInfo.length - 1);
            $("#hidShops").val(shopInfo);
        }
    }
    function logOut() {
        top.location.href = "../../index/9999";
    }
</script>

<!--<form action="order" method="post">-->
<!--<input name="txtOrderNum" type="text" value=""/>-->
<!--<input name="txtDescription" type="text" value=""/>-->
<!--<input type="submit" value="submit"/>-->
<!--</form>-->
</body>
</html>
